
import * as THREE from '../lib/three.module.js';
import { Gallery } from './gallery.js';
import { galleryData } from './data.js';

// 等待页面加载完成
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM Content Loaded');
    
    // 检查Three.js是否正确加载
    if (typeof THREE === 'undefined') {
        console.error('Three.js not loaded!');
        return;
    }
    console.log('Three.js loaded successfully');

    // 检查数据是否正确加载
    if (typeof galleryData === 'undefined') {
        console.error('Gallery data not loaded!');
        return;
    }
    console.log('Gallery data loaded:', galleryData);

    // 创建导航控制按钮
    const navigationControls = document.createElement('div');
    navigationControls.className = 'navigation-controls';
    
    const prevButton = document.createElement('button');
    prevButton.className = 'nav-btn';
    prevButton.textContent = '上一个展厅';
    
    const nextButton = document.createElement('button');
    nextButton.className = 'nav-btn';
    nextButton.textContent = '下一个展厅';
    
    navigationControls.appendChild(prevButton);
    navigationControls.appendChild(nextButton);
    document.body.appendChild(navigationControls);
    console.log('Navigation controls created');

    // 创建展厅标题元素
    const roomTitle = document.createElement('div');
    roomTitle.className = 'room-title';
    document.body.appendChild(roomTitle);
    console.log('Room title element created');

    // 设置弹窗逻辑
    const settingsBtn = document.getElementById('settings-btn');
    const settingsModal = document.getElementById('settings-modal');
    const settingsClose = document.getElementById('settings-close');
    const toggleAvatar = document.getElementById('toggle-avatar');
    // 默认不显示小人
    let showAvatar = false;
    toggleAvatar.checked = false;
    settingsBtn.onclick = () => {
        settingsModal.style.display = 'block';
    };
    settingsClose.onclick = () => {
        settingsModal.style.display = 'none';
    };
    // 点击弹窗外关闭
    window.addEventListener('mousedown', (e) => {
        if (settingsModal.style.display === 'block' && !settingsModal.contains(e.target) && e.target !== settingsBtn) {
            settingsModal.style.display = 'none';
        }
    });

    try {
        // 初始化画廊
        console.log('Initializing gallery...');
        const gallery = new Gallery(galleryData);
        // 默认不显示小人
        gallery.setAvatarVisible(false);
        // 监听开关
        toggleAvatar.addEventListener('change', function() {
            showAvatar = this.checked;
            gallery.setAvatarVisible(showAvatar);
        });
        console.log('Gallery initialized successfully');

        // 添加导航按钮事件监听器
        prevButton.addEventListener('click', () => gallery.previousRoom());
        nextButton.addEventListener('click', () => gallery.nextRoom());
        console.log('Navigation button listeners added');

        // 隐藏加载提示
        document.getElementById('loading').classList.add('hidden');
        console.log('Loading indicator hidden');
    } catch (error) {
        console.error('Error initializing gallery:', error);
        document.getElementById('loading').textContent = '加载失败，请检查控制台错误信息';
    }
}); 